<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
    font-size: 20px;
    color: blue;
}
p{
    font-size: 16px;
    color: green;
}
</style>
</head>
<body>
    
<h1>标题</h1>
<p>及时反馈及时是会计考试恐惧和</p>

<script>

// 页面渲染流程
// 浏览器标签页中的GUI渲染线程，负责渲染页面
// 1.从上到下解析html文档，生成DOM Tree（节点树）
// 2.加载解析CSS，生成CSSOM Tree（样式树）
// 3.根据DOM Tree和CSSOM Tree，计算生成Rendering Tree（渲染树）
// 4.根据Rendering Tree渲染显示到浏览器界面中

// 重排，重新排列/重新排版，当元素的大小、尺寸、位置、添加、删除节点等操作，都会引发重排
// 重绘，重新绘制/重新渲染，当元素的字体颜色、边框颜色、背景颜色等操作，会引发重绘
// 重排必定引发重绘，重绘不会引发重排

// 浏览器标签页中的JS引擎线程，负责解析执行JS脚本
// 当GUI渲染线程解析到script标签时，立即停止渲染工作
// JS引擎线程开始工作，解析执行JS脚本，直到JS脚本执行完成后，GUI渲染线程继续渲染后面的内容
// GUI渲染线程和JS引擎线程是互斥，不能同时工作
// 所以说，JS脚本执行会阻塞页面渲染


</script>
</body>
</html>